<template>
  <!--最外层-->
    <div class="firstdiv">
      <!--最上层-->
      <div class="creditsExchange-left-title">
        <h2>{{pageTitle}}</h2>
      </div>
      <div class="creditsExchange-title-line"></div>
      <div class="creditsExchange-left-title">
        <h4>兑换礼品心愿单</h4>
      </div>
      <!--中间层姓名查询h和提交日期查询-->
      <div class="mian">
        <div class="nameSearch">
          <el-radio v-model="radio" label="1" size="medium">按人员名称查询</el-radio>
          <el-input placeholder="按人员名称查询"prefix-icon="el-icon-search" v-model="byNameSearch"></el-input>
        </div>
        <div class="nameSearch">
          <el-radio v-model="radio" label="2">按提交日期查询</el-radio>
          <el-date-picker v-model="submitData" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </div>
      <!--表格-->
      <div>
        <el-table :data="tableData" highlight-current-row @current-change="handleTableChange"
                  border style="width: 98%;margin:0 1%" height="500">
          <el-table-column prop="wishListNum" label="心愿单编号" width="180"></el-table-column>
          <el-table-column prop="people" label="提交人" width="180"></el-table-column>
          <el-table-column prop="organization" label="所属支部"></el-table-column>
          <el-table-column prop="submitDate" label="提交日期"></el-table-column>
          <el-table-column prop="integralSum" label="心愿单总积分"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div style="width: 100%;text-align: center;margin: 5px auto ">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <!-- 积分兑换弹窗 -->
      <div>
        <el-dialog title="礼品兑换" :visible.sync="dialogGiftVisible" :before-close="closeGiftDialog">
          <div>
            <el-table :data="gridData">
              <el-table-column property="giftNum" label="礼品编号"></el-table-column>
              <el-table-column property="giftName" label="礼品名称" ></el-table-column>
              <el-table-column property="giftIntegral" label="积分"></el-table-column>
              <el-table-column property="integralAndMoney" label="积分+现金"></el-table-column>
              <el-table-column property="summary" label="介绍摘要"></el-table-column>
              <el-table-column property="num" label="数量">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-input v-model="scope.row.num" placeholder="请输入兑换数量" type="number"></el-input>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="integralComputation">
            <div>总积分: <span>150</span></div>
            <div>本次总计花费积分: <span>130</span></div>
            <div>现金: <span>0</span></div>
            <hr>
            <div>本次扣减积分: <span>130</span></div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeGiftDialog">取 消</el-button>
            <el-button type="primary" @click="submitGiftDialog">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
</template>
<script>
    // import __ from '__' // __是需要手动引入的文件
    export default {
        name: '',
        components: {},
        data () {
            return {
//                页面标题
              pageTitle:'礼品管理',
//              按名字查询
              byNameSearch:'',
//              按提交日期查询
              submitData:'',
//            当前页
              currentPage1: 1,
//            每页显示几条
              pageSize: 10,
//            总条目数
              total: 0,
              msg: '这个是Home模板页',
              radio: '1',
//              主表单数据列表
              tableData: [{
                wishListNum:'1',
                people:'张三',
                organization:'中兴社区一支部',
                submitDate:'2019-02-10',
                integralSum:'1212'
              },{
                wishListNum:'1',
                people:'张三',
                organization:'中兴社区一支部',
                submitDate:'2019-02-10',
                integralSum:'1212'
              },],
              tableDataChecked:null,
//              弹窗相关
              dialogGiftVisible:false,
              gridData: [{
                giftId:0,
                giftNum: '2016-05-02',
                giftName: '王小虎',
                giftIntegral:20,
                integralAndMoney:'50p'+'40$',
                summary: '介绍摘要',
                num:0
              }, {
                giftId:1,
                giftNum: '2016-05-02',
                giftName: '王小虎',
                giftIntegral:20,
                integralAndMoney:'50p'+'40$',
                summary: '介绍摘要',
                num:1
              }, {
                giftId:2,
                giftNum: '2016-05-02',
                giftName: '王小虎',
                giftIntegral:20,
                integralAndMoney:'50p'+'40$',
                summary: '介绍摘要',
                num:0
              }, {
                giftId:3,
                giftNum: '2016-05-02',
                giftName: '王小虎',
                giftIntegral:20,
                integralAndMoney:'50p'+'40$',
                summary: '介绍摘要',
                num:2
              }],
            }
        },
        methods: {
//            选中表单数据
          handleTableChange(e){
            this.tableDataChecked = e
            this.dialogGiftVisible = true
          },
//          弹窗关闭
          closeGiftDialog(e){
            this.$confirm('确认关闭？')
              .then(_ => {
                this.dialogGiftVisible = false
                done();
              })
              .catch(_ => {
              });

          },
//          弹窗内容提交
          submitGiftDialog(e){
            this.dialogGiftVisible = false
          },
//          分页
          handleCurrentChange(e){
              console.log(e)
          }
        }
    }
</script>
<style lang="postcss" scoped>
  .firstdiv{
    background-color: #fff;
  }
  .creditsExchange-left-title{
    text-align: left;
    padding: 10px 20px;
  }
  .creditsExchange-title-line{
    height:1px;
    width: 98%;
    margin: auto 1%;
    background-color: #ddd;
  }
  .mian{
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width:90%;
  }
  .nameSearch{
    display: flex;
    text-align: left;
    margin:0 20px 20px 20px;
  }
  .integralComputation{
    width:60%;
    margin:20px 20%;
    font-size: 16px;
    color: #292929;
    line-height: 30px;
  }
</style>
